一開始矇矇懂懂加入前端行列的我拿起了第一本前端書籍的時候，上面同時介紹了 HTML 與 CSS，胸懷壯志的想說要把他看個兩三遍，然而事情沒有這麼理想。
在當年陸續碰過其他程式語言的我來說對 HTML 太沒有學習的熱情了，不就是塊級元素、行內元素跟一堆的 input 而已嗎，只要 CSS Display 套上去都一樣，h1 跟 p 不都是放文字的嗎？甚至 div 也可以塞文字啊!
最後，我的 HTML 就變成了這樣...
<html>
<head><title>小將個人網站</title></head>
<body>
<div><img href="./logo.svg" />小將個人網站</div>
<div>第一篇文章標題</div>
<div>文章內容...</div>
<form action="/api/message" method="post">
<div>與我聯繫</div>
<input id="message" placeholder="請填寫留言" />
<button>送出</button>
</form>
<div>copyright ©小將</div>
</body>
</html>
這樣在顯示上面會跑版嗎？不見得，但網頁的目的基本上還是一個提供資訊、服務的地方，只要你忽略搜尋引擎，搜尋引擎就會忽略你。
我們可以在 head 處加上 meta tag 提供一些基本資訊，並且透過更有代表性的標籤將網站結構弄得更加清楚，提高網站的 SEO 排名。
以下是透過大家的好朋友 chatGPT 更改後的結構，雖然 div 萬用，但還是給他一個休息的機會，饒過搜尋引擎，也給自己一個向上的方向吧。
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="了解全球常見的咖啡生產地及其獨特風味，深入探索咖啡的源頭。">
<meta property="og:site_name" content="小將個人網站">
<meta property="og:title" content="常見咖啡生產地">
<meta property="og:description" content="探索全球主要咖啡產地，了解各地咖啡的獨特風味與特色。">
<meta property="og:image" content="https://example.com/path/to/image.jpg">
<meta property="og:url" content="https://example.com/coffee-regions">
<title>常見咖啡生產地 - 小將個人網站</title>
<link rel="icon" href="./favicon.ico">
</head>
<body>
<header>
<img src="./logo.svg" alt="小將個人網站標誌">
<p>小將個人網站</p>
</header>
<main>
<article>
<h1>常見咖啡生產地</h1>
<p>探索全球主要咖啡產地，從非洲到南美洲，了解各地咖啡的獨特風味與特色。</p>
</article>
<section>
<h2>與我聯繫</h2>
<form action="/api/message" method="post">
<label for="message">留言：</label>
<textarea id="message" name="message" placeholder="請填寫留言"></textarea>
<button type="submit">送出</button>
</form>
</section>
</main>
<footer>
<p>Copyright © 小將</p>
</footer>
</body>
</html>
接下來的文章會把常用的語意化 element tag 以及 meta tag 介紹一下，這些都是常見可以增加排名的方法。
iThome鐵人賽
看影片追技術